<template>
  <div>
    <h2>Play</h2>
    <div>
      <!-- params动态路由传参---记得在路由表中占位!!!!!! -->
      <button @click="$router.push('/play/item/1/KTV')">KTV</button>

      <button
        @click="
          $router.push({
            name: 'PlayItem',
            params: {
              id: 2,
              name: '足球',
            },
          })
        "
      >
        足球
      </button>

      <!-- 
        params传参注意事项:
          1. params传参不能和path一起使用,只能和name一起使用
          2. params如果是可选参数,请不要传递空字符串,


       -->
      <button
        @click="
          $router.push({
            name: 'PlayItem',
            params: {
              id: 3,
              name: '' || null,
            },
          })
        "
      >
        篮球
      </button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Play",
  mounted() {
    console.log("Play--mounted");
  },
  beforeDestroy() {
    console.log("Play--beforeDestroy");
  },
  activated() {
    console.log("Play---激活");
  },
  deactivated() {
    console.log("Play---失活");
  },
};
</script>

<style></style>
